"use client";

import { useState } from "react";
import Link from "next/link";

type FAQ = {
  question: string;
  answer: string;
};

type FAQCategories = {
  general: FAQ[];
  service: FAQ[];
  booking: FAQ[];
  payment: FAQ[];
};

export default function FAQPage() {
  const [activeCategory, setActiveCategory] = useState<keyof FAQCategories>("general");

  const categories = [
    { id: "general" as keyof FAQCategories, name: "一般问题" },
    { id: "service" as keyof FAQCategories, name: "服务相关" },
    { id: "booking" as keyof FAQCategories, name: "预约流程" },
    { id: "payment" as keyof FAQCategories, name: "付款方式" },
  ];

  const faqs: FAQCategories = {
    general: [
      {
        question: "百善家政提供哪些服务？",
        answer: "百善家政提供多种家政服务，包括家庭保洁、深度清洁、月嫂服务、育儿嫂、养老护理等。我们的服务覆盖家庭生活的方方面面，致力于为您提供全方位的家政解决方案。"
      },
      {
        question: "百善家政的服务区域有哪些？",
        answer: "目前，百善家政主要在北京、上海、广州等一线城市提供服务。我们正在不断扩展服务区域，如果您所在的地区不在我们的服务范围内，请联系我们的客服，我们会尽力为您安排服务。"
      },
      {
        question: "如何联系百善家政客服？",
        answer: "您可以通过以下方式联系我们的客服：电话：400-123-4567（服务时间：周一至周日 8:00-20:00）；电子邮件：service@baishanjz.com；微信公众号：百善家政（扫描官网二维码关注）。"
      },
      {
        question: "百善家政的家政人员是否经过培训？",
        answer: "是的，百善家政的所有家政人员都经过严格的专业培训和背景审查。我们定期组织培训活动，确保我们的团队掌握最新的服务技能和标准，为客户提供专业、高质量的服务。"
      }
    ],
    service: [
      {
        question: "家庭保洁服务包括哪些内容？",
        answer: "我们的家庭保洁服务包括日常保洁（客厅、卧室、厨房、卫生间等区域的清洁）、深度清洁（去除顽固污渍、消毒杀菌等）、开荒保洁（新房装修后的全面清洁）以及定期保洁服务（每周/每月上门服务）。"
      },
      {
        question: "月嫂服务的周期是多久？",
        answer: "月嫂服务的标准周期为26天，也可以根据客户需求延长或缩短服务时间。服务内容包括产妇护理、新生儿护理、母乳喂养指导和产妇营养餐制作等。"
      },
      {
        question: "育儿嫂和月嫂有什么区别？",
        answer: "月嫂主要负责产妇和新生儿的护理，服务周期通常为产后一个月；而育儿嫂专注于0-3岁婴幼儿的照料和早期教育，服务周期更长，可以根据需要长期聘用。"
      },
      {
        question: "养老护理服务适合哪些老人？",
        answer: "我们的养老护理服务适合需要日常生活照料、基础医疗护理、康复训练辅助以及情感陪伴的老年人。无论是生活能够自理但需要一些帮助的老人，还是需要全天候照顾的老人，我们都能提供相应的服务。"
      }
    ],
    booking: [
      {
        question: "如何预约百善家政的服务？",
        answer: "您可以通过电话（400-123-4567）、官网在线表单或微信公众号预约我们的服务。预约时请提供您的基本信息、所需服务类型、服务地址和期望的服务时间，我们的客服人员会尽快与您联系确认详情。"
      },
      {
        question: "预约服务需要提前多久？",
        answer: "建议您提前3-5天预约常规服务，如家庭保洁；对于月嫂、育儿嫂等专业服务，建议提前1-2个月预约，以确保我们能够安排最合适的服务人员。紧急情况下，我们也会尽力为您安排临时服务。"
      },
      {
        question: "可以指定特定的服务人员吗？",
        answer: "是的，如果您之前使用过我们的服务并对某位服务人员特别满意，可以在预约时指定该服务人员。我们会尽量满足您的要求，但也需要考虑该服务人员的档期安排。"
      },
      {
        question: "如何取消或更改已预约的服务？",
        answer: "如需取消或更改已预约的服务，请至少提前24小时通知我们。您可以通过电话、邮件或微信联系客服进行操作。对于未提前24小时取消的预约，可能会收取一定的取消费用。"
      }
    ],
    payment: [
      {
        question: "百善家政的收费标准是怎样的？",
        answer: "我们的收费标准根据服务类型、服务时长和服务内容而有所不同。家庭保洁按小时或按项目计费；月嫂和育儿嫂服务按天或按月计费；养老护理服务可以选择按天、按周或按月付费。具体价格请咨询客服或查看官网价格表。"
      },
      {
        question: "支持哪些支付方式？",
        answer: "我们支持多种支付方式，包括现金、银行转账、微信支付、支付宝以及信用卡支付。您可以选择最方便的方式进行支付。"
      },
      {
        question: "是否需要支付定金？",
        answer: "对于月嫂、育儿嫂等长期服务，通常需要支付一定比例的定金（一般为总费用的20%-30%）来确认预约。家庭保洁等短期服务一般不需要提前支付定金。"
      },
      {
        question: "如何获取发票？",
        answer: "我们可以为所有服务提供正规发票。如需发票，请在服务完成后向客服提出申请，并提供开票信息。发票可以通过邮寄或电子邮件的方式发送给您。"
      }
    ]
  };

  return (
    <div className="flex flex-col">
      {/* 页面标题 */}
      <section className="bg-blue-600 text-white py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl font-bold mb-4">常见问题</h1>
          <p className="text-xl max-w-3xl mx-auto">
            找到您关于百善家政服务的常见问题解答
          </p>
        </div>
      </section>

      {/* FAQ分类和内容 */}
      <section className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* 分类标签 */}
          <div className="flex flex-wrap justify-center gap-4 mb-12">
            {categories.map((category) => (
              <button
                key={category.id}
                onClick={() => setActiveCategory(category.id)}
                className={`px-6 py-2 rounded-full transition-colors ${
                  activeCategory === category.id
                    ? "bg-blue-600 text-white"
                    : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-300"
                }`}
              >
                {category.name}
              </button>
            ))}
          </div>

          {/* FAQ内容 */}
          <div className="space-y-8">
            {faqs[activeCategory].map((faq, index) => (
              <div
                key={index}
                className="bg-white rounded-lg shadow-md overflow-hidden"
              >
                <div className="p-6">
                  <h3 className="text-xl font-semibold text-gray-900 mb-4">
                    {faq.question}
                  </h3>
                  <p className="text-gray-600">{faq.answer}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 未解决问题 */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-white rounded-lg shadow-md p-8 lg:p-12">
            <div className="text-center mb-8">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">
                没有找到您的问题？
              </h2>
              <p className="text-lg text-gray-600 max-w-3xl mx-auto">
                如果您有其他问题，请随时联系我们的客服团队，我们将竭诚为您解答
              </p>
            </div>
            <div className="flex flex-col sm:flex-row justify-center gap-4">
              <Link
                href="/contact"
                className="bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition-colors text-center"
              >
                联系我们
              </Link>
              <a
                href="tel:4001234567"
                className="border border-blue-600 text-blue-600 px-6 py-3 rounded-md font-medium hover:bg-blue-50 transition-colors text-center"
              >
                致电客服: 400-123-4567
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
} 